<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>downloadIframe</title>
</head>

<body>
    <button type="button" id="downloadBtn">点击我下载图片</button>
    <div id="status-text">未下载</div>
    <script>
        const downloadIframe = (path, resolve, time = 1000) => {
            let iframe = document.createElement('iframe');
            iframe.src = path;
            iframe.style.display = 'none';
            document.body.appendChild(iframe);
            let timer = null;
            let handler = function () {
                const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                if (['complete', 'interactive'].indexOf(iframeDoc.readyState) > -1) {
                    document.body.removeAttribute(iframe);
                    if (timer) clearTimeout(timer);
                    resolve('success');
                } else {
                    timer = setTimeout(handler, time);
                    resolve('downloading');
                }
            };
            handler();
        };
        document.getElementById('downloadBtn').addEventListener('click', () => {
            downloadIframe('./1.png', (status) => {
                document.getElementById('status-text').textContent = status;
            })
        })
    </script>
</body>

</html>